<template>
    <div>
        <el-drawer title="发通知" v-model="drawerShow" 
            direction="rtl" :before-close="handleClose" :size="900"
            :close-on-click-modal="false">
            <el-form :model="noticeForm" :rules="formRules" ref="formRef" :inline="true" 
                label-position="top" require-asterisk-position="right">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="通知标题" prop="noticeTitle">
                            <el-input v-model="noticeForm.noticeTitle" placeholder="请输入通知标题" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="通知类型" prop="noticeTypeId">
                            <DataDicSelect v-model:value="noticeForm.noticeTypeId" 
                                dicName="notification_type" label="通知类型" 
                                :multiple="false"></DataDicSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="重要程度" prop="noticeImportanceId">
                            <el-checkbox-group v-model="noticeForm.noticeImportanceIdArr">
                                <el-checkbox label="224" >紧急</el-checkbox>
                                <el-checkbox label="225" >重要</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="通知对象" prop="noticeObjectValues">
                            <DataCommunicationBook v-model="noticeForm.noticeObjectValues" placeholder="请选择通知对象"
                                @change="getNoticeObjec"></DataCommunicationBook>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="relative">
                        <div style="position: absolute;right: 12px;top: -5px;">
                            <DataUploadPlus v-model="noticeForm.fileList" :showFileList="false" label="添加附件"
                                @finish="finish"></DataUploadPlus>
                        </div>
                        <el-form-item label="通知描述" prop="noticeContent">
                            <editor v-model="noticeForm.noticeContent" :min-height="260" type="url" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" v-if="noticeForm.fileList.length">
                        <el-form-item label="附件信息" prop="plicyNo">
                            <ul>
                                <li v-for="(fItem, fIndex) in noticeForm.fileList" class="flex cursorPointer" 
                                    @click="viewFile(fItem)">
                                    <i class="icon-base icon-base-appendix" 
                                        style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                                    <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                                    <el-button link type="primary" @click="removeFile(fItem, fIndex)">移 除</el-button>
                                </li>
                            </ul>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="其他信息" prop="isTopStatus">
                            <el-checkbox-group v-model="noticeForm.isTopStatusArr">
                                <el-checkbox :label="1" >置 顶</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitForm">发 送</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import DataUploadPlus from "@/components/DataComponents/DataUploadPlus.vue"
    import DataDicSelect from "@/components/DataComponents/DataDicSelect.vue"
    import DataCommunicationBook from "@/components/DataComponents/DataCommunicationBook.vue"
    import { ElMessage } from 'element-plus'
    const { proxy } = getCurrentInstance();
    const props = defineProps(['show', 'defaultValue', 'state']);
    const emit = defineEmits(['update:show', 'submit']);
    const drawerShow = ref(false);
    const noticeForm = ref({ noticeObjects: [], fileList: [], noticeContent: undefined })
    const formRules = ref({
        noticeObjectValues: { required: true, trigger: ['change'], message: '请至少添加一名通知对象' },
        noticeTitle: { required: true, trigger: ['change'], message: '请输入通知标题', },
        noticeTypeId: { required: true, trigger: ['change'], message: '请选择通知类型', },
        noticeContent: { required: true, trigger: ['blur'], message: '请输入通知描述' },
    });
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value){
            if(props.state) setDedefaultValue();
        }else{
            resetFormData();
        }
    }, { deep: true });
    const setDedefaultValue = () => {
        const defaultForm = props.defaultValue || {}
        noticeForm.value.id = defaultForm.id;
        noticeForm.value.noticeTitle = defaultForm.noticeTitle;
        noticeForm.value.noticeContent = defaultForm.noticeContent;
        noticeForm.value.noticeTypeId = defaultForm.noticeTypeId;
        noticeForm.value.noticeImportanceIdArr = defaultForm.noticeImportanceId ? defaultForm.noticeImportanceId.split(',') : [];
        noticeForm.value.noticeObjectValues = defaultForm.receiverIds ? defaultForm.receiverIds.split(',') : [];
        noticeForm.value.isTopStatusArr = [ defaultForm.isTopStatus ];
        const fileListTime = defaultForm.attachUrls ? defaultForm.attachUrls.split(',') : []
        fileListTime.map( item => {
            const names = item.split('/');
            const obj = { name: names[names.length - 1], url: item }
            noticeForm.value.fileList.push(obj);
        });
    };
    const getNoticeObjec = (checkedItems) => {
        noticeForm.value.receiverNames = checkedItems.map( item => item.label);
    };
    const removeFile = (item, index) => {
        noticeForm.value.fileList.splice(index, 1);
    };
    const finish = () => {
        ElMessage({ type: 'success', message: '附件添加成功', })
    };
    const viewFile = (item) => {
        const images = [ 'jpg', 'jpeg', 'png', 'gif' ]
        const fileTypes = item.name.split('.');
        const fileType = fileTypes[fileTypes.length - 1];
    };
    const submitForm = () => {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                emit('submit', noticeForm.value, '1');
            }
        })
    };
    const handleClose = () => {
        if(noticeForm.value.noticeContent){
            proxy.$modal.confirm('确认关闭后，将清空填写内容').then(function() {
                drawerShow.value = false;
                emit('update:show', false);
                resetFormData();
            }).catch(() => {});
            return
        }
        drawerShow.value = false;
        emit('update:show', false);
        resetFormData();
    };
    const resetFormData = () => {
        noticeForm.value.noticeObjectValues = [];
        noticeForm.value.receiverNames = [];
        noticeForm.value.noticeContent = undefined;
        noticeForm.value.fileList = [];
        noticeForm.value.isTopStatusArr = [];
        noticeForm.value.noticeImportanceIdArr = [];
        noticeForm.value = { noticeObjects: [], fileList: [], noticeContent: undefined };
        proxy.resetForm("formRef");
    };
    defineExpose({handleClose});
</script>
<style scoped lang="scss">
    :deep(.el-drawer__body){
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 20px;
    }
</style>
